<template>
	<div class="center">
		<div class="cen-bg">
			<img src="../../assets/images/icon_cen_bg.png" />
			<div class="cen-info flex">
				<img src="../../assets/images/icon_cen_bg.png" />
				<p v-if="moblie">
					<b>{{ userName }}</b>
					<span>手机号：{{ viewMoblie(moblie) }}</span>
					<span>ID：{{ userId }}</span>
				</p>
				<label @click="login(false)" v-else>登录/注册</label>
			</div>
		</div>
		<ul>
			<li @click="viewInfo(list)" class="flex" v-for="list in listArr" :key="list.type">
				<em :class="list.icon"></em>
				<span>{{ list.name }}</span>
				<i class="van-icon van-icon-arrow van-cell__right-icon"></i>
			</li>
		</ul>
		<a v-if="moblie" @click="loginOut"><van-btn text="退出登录" type="2" /></a>
	</div>
</template>

<script>
import vanBtn from '../common/vanBtn';
export default {
	components: {
		vanBtn
	},
	data() {
		return {
			listArr: [
				{
					name: '我的团队',
					id: 'Myteam',
					icon: 'cl0-1',
					type: '1'
				},
				{
					name: '我的银行卡',
					icon: 'cl0-2',
					id: 'BankCard',
					type: '2'
				},
				{
					name: '我的资产',
					icon: 'cl0-3',
					id: 'MyAssets',
					type: '3'
				},
				{
					name: '客服中心',
					id: 'MyCustomer',
					icon: 'cl0-4',
					type: '4'
				},
				{
					name: '推广海报',
					id: 'PromotionPage',
					icon: 'cl0-5',
					type: '5'
				},
				{
					name: '投诉反馈',
					id: 'Feedback',
					icon: 'cl0-6',
					type: '6'
				}
			],
			userName: '',
			moblie: '',
			userId: ''
		};
	},
	mounted() {
		document.title = '个人中心'
		if (localStorage.getItem('userInfo')) {
			const info = JSON.parse(localStorage.getItem('userInfo'));
			this.userName = info.nickname;
			this.moblie = info.loginNo;
			this.userId = info.id;
		}
	},
	methods: {
		viewMoblie(t) {
			if (!t) return '-';
			return t.substring(0, 3) + '****' + t.substring(t.length - 4, t.length);
		},
		viewInfo(row) {
			if (row.type !== '1' && row.type !== '6') {
				if (!localStorage.getItem('userInfo')) {
					this.$toast({
						message: '尚未登录',
						position: 'bottom'
					});
					this.login(true);
					return;
				}
			}
			this.$router.push({ path: `/${row.id}`, query: {} });
		},
		login(t) {
			if (t) {
				setTimeout(() => {
					this.$router.push({
						path: '/Login',
						query: {}
					});
				}, 1200);
			} else {
				this.$router.push({
					path: '/Login',
					query: {}
				});
			}
		},
		loginOut() {
			this.$dialog
				.confirm({
					title: '温馨提示',
					message: '确定退出登录？'
				})
				.then(() => {
					setTimeout(() => {
						this.$toast({
							message: '退出成功',
							position: 'bottom'
						});
						localStorage.removeItem('Token');
						localStorage.removeItem('userInfo');
						this.userName = '';
						this.moblie = '';
						this.userId = '';
					}, 1200);
				})
				.catch(() => {
					// on cancel
				});
		}
	}
};
</script>

<style lang="less" scoped>
.center {
	margin-bottom: 100px;
	.flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.cen-bg {
		position: relative;
		z-index: 1;
		> img {
			width: 100%;
		}
		.cen-info {
			position: absolute;
			bottom: 50px;
			height: 200px;
			left: 5%;
			right: 5%;
			padding: 5%;
			box-sizing: border-box;
			> img {
				width: 120px;
				height: 120px;
				border-radius: 50%;
				border: 4px solid #f9f9f9;
			}
			> label {
				font-size: 36px;
				font-weight: 500;
				padding: 42px 0 0 30px;
				color: #8e611f;
			}
			> p {
				width: 60%;
				margin-left: 25px;
				b {
					display: block;
					font-size: 36px;
					color: #333;
					font-weight: 500;
					padding-bottom: 8px;
				}
				> span {
					display: block;
					color: #8e611f;
					line-height: 38px;
					font-size: 25px;
				}
			}
		}
	}
	> a {
		display: block;
		padding: 5% 6%;
	}
	ul {
		position: relative;
		z-index: 2;
		background: #fff;
		padding: 5% 0;
		margin-top: -5%;
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;
		> li {
			padding: 3% 5%;
			position: relative;
			&:active {
				background: #f8f8f8;
			}
			> em {
				position: relative;
				top: 3px;
				margin-right: 20px;
				height: 35px;
				width: 35px;
				line-height: 35px;
				text-align: center;
				&.cl0-1 {
					background: url(../../assets/images/icon_c1.png) no-repeat;
					background-size: 100% !important;
				}
				&.cl0-2 {
					background: url(../../assets/images/icon_c2.png) no-repeat;
					background-size: 100% !important;
				}
				&.cl0-3 {
					background: url(../../assets/images/icon_c3.png) no-repeat;
					background-size: 100% !important;
				}
				&.cl0-4 {
					background: url(../../assets/images/icon_c4.png) no-repeat;
					background-size: 100% !important;
				}
				&.cl0-5 {
					background: url(../../assets/images/icon_c5.png) no-repeat;
					background-size: 100% !important;
				}
				&.cl0-6 {
					background: url(../../assets/images/icon_c6.png) no-repeat;
					background-size: 100% !important;
				}
			}
			> span {
				font-size: 29px;
				font-weight: 550;
			}
			> i {
				position: absolute;
				right: 3%;
				top: 50%;
				margin-top: -15px;
				height: 30px;
				width: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 30px;
				color: #f1d4a8;
			}
		}
	}
}
</style>
